<template>
	<view>
		<view class="Long">
			<wly-tabnav ref="tabnav" :fixed="true" :tabnav="tabnav" @ontype_='ontype'></wly-tabnav>
		    <view class="search" @click="search"></view>
			<view class="drawer">
				<uni-section title="右侧滑出" type="line">
					<view class="example-body">
						<view type="primary" class="anniu" @click="showDrawer('showRight')"><text class="word-btn-white">...</text>
						</view>
						<uni-drawer ref="showRight" mode="right" :mask-click="true" width=150 hight=200 @change="change($event,'showRight')">
							<view class="scroll-view">
								
							</view>
						</uni-drawer>
					</view>
				</uni-section>
			</view>
		</view>
		<view class="ko"></view>
		<manhuan  v-if="type == '0'"></manhuan>
		<xshu v-if="type == '1'"></xshu>
	</view>
</template>

<script>
	import manhuan from '../../components/manhuan.vue'
	import xshu from '../../components/xshu.vue'
	export default {
		components:{
			manhuan,
			xshu
		},
		data() {
			return {
				type: '0',
				tabnav:[
					{
								type: '0', //状态值
								name: '漫画',
								list: [], //数据
							}, {
								type: '1', //状态值
								name: '小说',
								list: [], //数据
							}
				],
				showRight: false,
				showLeft: false
			}
		},
		onLoad() {
			console.log('jnjdjs',this.$refs)
			this.tabWid= 20
		},
		methods: {
			  ontype(e){
		            this.type = e.type
					console.log('type',this.type)
			        console.log('e',e);
			    },
				search(){
					uni.navigateTo({
						url:'../../new/serch/serch'
					})
				},
				confirm() {},
					// 打开窗口
					showDrawer(e) {
						this.$refs[e].open()
					},
					// 关闭窗口
					closeDrawer(e) {
						this.$refs[e].close()
					},
					// 抽屉状态发生变化触发
					change(e, type) {
						console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
						this[type] = e
					}
				},
				onNavigationBarButtonTap(e) {
					if (this.showLeft) {
						this.$refs.showLeft.close()
					} else {
						this.$refs.showLeft.open()
					}
				},
				// app端拦截返回事件 ，仅app端生效
				onBackPress() {
					if (this.showRight || this.showLeft) {
						this.$refs.showLeft.close()
						this.$refs.showRight.close()
						return true
					}
		}
	}
</script>

<style>
	body{
		background-color: #f2f3f5;
	}
	.Long{
		width: 90%;
		height: 60px;
		margin-left: 5%;
		position: fixed;
		background-color: #f2f3f5;
	}
	.wly-tabnav{
		width: 40% !important;
		position: absolute !important;
		left: 32% !important;
	}
	.search{
		width: 20%;
		height: 50px;
		position: absolute;
		top: 22%;
		left: 5%;
		background-repeat: no-repeat;
		background-size: 40%;
		background-image: url('https://bpic.51yuansu.com/pic2/cover/00/30/94/58109ad92ecef_610.jpg');
	}
	.drawer{
		width: 20%;
		height: 100%;
		position: absolute;
		left: 89%;
	}
	.ko{
		height: 60px;
		width: 100%;
	}
	.anniu{
		background-color: #f2f3f5 !important;
	}
   .word-btn-white{
		color: #000;
		font-size: 24px;
	}
</style>
